<template>
  <div>
     
    <table cellspacing="0" border="1" :cellpadding="0">
      <tr v-for="(item, index) in data" :key="index">
         
        <td>{{ item.menuName }}</td>
         
        <td>
               
          <tr
            height="40"
            v-for="(item1, index1) in item.children"
            :key="index1"
          >
             
            <td>{{ item1.menuName }}</td>
                     
          </tr>
                 
        </td>
             
        <td>
               
          <tr
            height="40"
            v-for="(item1, index1) in item.children"
            :key="index1"
          >
             
            <td v-if="item1.menuLevel == 0">
              <div v-for="(item2, index2) in renderTh(item1)" :key="index2">
                {{ item2.menuName }}            
              </div>
            </td>
             
            <td v-else style="display: flex">
              <div v-for="(item2, index2) in renderTh(item1)" :key="index2">
                {{ item2.menuName }}            
              </div>
            </td>
                   
          </tr>

                 
        </td>
           
      </tr>
       
    </table>
       
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          menuName: "实验室管理",
          children: [
            {
              menuName: "工作台",
              menuIsno: null,
              menuLevel: 2,
              children: [
                { menuName: "添加实验室", ha: "3" },
                { menuName: "添加实验室1", ha: "3" },
                { menuName: "添加实验室2", ha: "3" },
              ],
            },
            {
              menuName: "实验室管理",
              menuLevel: 0,
              children: [
                { menuName: "新增", ha: "3" },
                { menuName: "编辑", ha: "3" },
              ],
            },
          ],
        },
      ],
      checked: false,
    };
  },
  methods: {
    renderTh(item, saveTh = []) {
      debugger;
      if (item instanceof Array && item.length) {
        item.forEach((i) => {
          if (i?.children && i?.children.length > 0 && i?.ha != "3") {
            this.renderTh(i.children, saveTh);
          }
          if (i?.ha == "3") {
            saveTh.push(i);
          }
        });
      }
      if (item instanceof Object) {
        if (item?.children && item?.children.length > 0 && item?.ha != "3") {
          this.renderTh(item.children, saveTh);
        }
        if (item?.ha == "3") {
          saveTh.push(item);
        }
      }
      console.log(saveTh);
      return saveTh;
    },
  },
};
</script>
